<template>
	<view >
		<view style="display: flex;flex-direction: row;align-items: center;">
			<view v-for="(item,index) in list" :key="index" >
				<view style="display: flex;flex-direction: row;align-items: center;">
					<view :class="item.selectedType ?'selected':'uncheck'" @tap="pitchOn(item)"></view>
					<view :class="item.borderType ?'selectedBorder':'uncheckBorder'" v-if="index < list.length-1" :style="{width:HN_width}"></view>
				</view>
				<view @tap="pitchOn(item)" style="text-align:left;">
					<text class="typeface1">{{item.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			isInterval: {
				type: Boolean,
				default: true
			}, //是否是区间模块
			list: {
				type: Array
			}, //刻度list数组   [{value:'1',name:'1年'}]
			fileSize: {
				type: Number
			}, //设置图片大小
			value: {
				type: Number,
				default:0,
			}, //默认数值
			minValue: {
				type: Number,
				default:0,
			}, //最小值
			maxValue: {
				type: Number,
				default:0,
			}, //最大值
			maxWidth:{
				type: Number,
				default:600,
			}

		},
		data() {
			return {
				count:0,
				falg:true
			};
		},
		onLoad() {
			
		},
		computed: {
			
			// 库房——最大长度
			HN_width() {
				console.log(this.list)

				var MaxLength = this.list.length;
				return uni.upx2px((this.maxWidth - 26 * MaxLength) / (MaxLength - 1)) + 'px';
			}
		},
		methods: {
			
			//点击选中事件
			pitchOn:function(item){
				if(this.isInterval==true){
					if(this.minValue==0 && this.maxValue==0){
						this.minValue=0;
						this.$emit('getMinValue',0,this.list);
						this.maxValue=0;
						this.$emit('getMaxValue',0,this.list);
						this.falg=true;
					}
					
					console.log(this.minValue)
					console.log(this.maxValue)
					console.log(this.falg);
					console.log(item.value);
					if(this.falg){ 
						if(item.value<this.minValue){
							this.minValue=0;
							this.$emit('getMinValue',0,this.list);
							this.maxValue=0;
							this.$emit('getMaxValue',0,this.list);
						}
						if(item.value !=this.list[this.list.length-1].value){
							this.falg=false;
							this.minValue=item.value;
							for (let i = 0; i < this.list.length; i++) {
								if(item.value==this.list[i].value){
									this.list[i].selectedType=true;
									this.list[i].borderType=false;
								}else{
									this.list[i].selectedType=false;
									this.list[i].borderType=false;
								}
							}
							// console.log(this.list);
							this.$emit('getMinValue',item.value,this.list);
						}
						
					}else{
						this.falg=true;
						if(this.minValue>this.maxValue&&this.maxValue!=0){
							this.minValue=item.value;
							this.$emit('getMinValue',item.value,this.list);
							this.falg=false;
						}
						this.maxValue=item.value;
						for (let i = 0; i < this.list.length; i++) {
							// console.log(this.minValue)
							// console.log(this.maxValue)
							// console.log(this.list[i].value);
							if(this.minValue<=this.list[i].value&&this.maxValue>=this.list[i].value){
								this.list[i].selectedType=true;
								this.list[i].borderType=true;
							}else{
								this.list[i].selectedType=false;
								this.list[i].borderType=false;
							}
							
							if(this.maxValue==this.list[i].value){
								this.list[i].selectedType=true;
								this.list[i].borderType=false;
							}
						}
						this.$emit('getMaxValue',item.value,this.list);
						
					}
					
				}else{
					//非区间
					this.value=item.value;
					for (let i = 0; i < this.list.length; i++) {
						if(item.value==this.list[i].value){
							this.list[i].selectedType=true;
							this.list[i].borderType=false;
						}else{
							this.list[i].selectedType=false;
							this.list[i].borderType=false;
						}
					}
					this.$emit('getValue',item.value,this.list);
					
				}
			}
		}
	}
</script>

<style>
	#border {
		width: 100%;
	}

	.selected {
		width: 24rpx;
		height: 24rpx;
		background: #FCA800;
		box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);
		border-radius: 50%;
		opacity: 1;
	}

	.selectedBorder {
		height: 8rpx;
		background: #FCA800;
		border: 2rpx solid #FCA800;
		opacity: 1;
		border-radius: 4rpx;
	}

	.uncheck {
		width: 26rpx;
		height: 24rpx;
		background: #FFFFFF;
		border: 2rpx solid #FCA800;
		box-shadow: 0rpx 6rpx 12rpx rgba(251, 136, 4, 0.25);
		border-radius: 50%;
		opacity: 1;
	}

	.uncheckBorder {
		height: 0rpx;
		border: 2rpx solid #FCA800;
		box-shadow: 0rpx 6rpx 12rpx rgba(249, 163, 13, 0.5);
		opacity: 1;
	}

	.typeface1 {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 36rpx;
		color: #656565;
		opacity: 1;
	}
</style>
